<body>
    <ul id="list"></ul>
    <ul id="list1"></ul>
</body>

<!-- 
	DocumentFragment 接口表示文档的一部分（或一段）。
	更确切地说，它表示一个或多个邻接的 Document 节点和它们的所有子孙节点。
	DocumentFragment 节点不属于文档树，继承的 parentNode 属性总是 null。 
	不过它有一种特殊的行为，该行为使得它非常有用，
	即当请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。
	这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作，
	尤其是与 Range 接口一起使用时更是如此。 可以用 Document.createDocumentFragment() 方法创建新的空 DocumentFragment 节点。---W3C
 -->

<!-- 
	document.createDocumentFragment()创建一个DocumentFragment，
	每个新建的DocumentFragment都会继承所有node方法。且DocumentFragment拥有nodeValue，nodeName，nodeType属性。
	我们知道，DOM树的操作会引起回流，那我们可以将DocumentFragment作为一个暂时的DOM节点存储器，
	当我们在DocumentFragment 修改完成时，我们就可以将存储DOM节点的DocumentFragment一次性加入DOM树，从而减少回流次数，达到性能优化的目的。
 -->

<script type="text/javascript">
//使用documentFragment添加节点
console.time("time")
let list = document.querySelector("#list"),
    fragment = document.createDocumentFragment(),
    n = 50000;
while(n--){
  fragment.appendChild(document.createElement("li"));
};
list.appendChild(fragment);
console.timeEnd("time")

//直接操作DOM添加节点
console.time("time1")
let list1 = document.querySelector("#list1"),
    i = 50000;
while(i--){
  list1.appendChild(document.createElement("li"))
};
console.timeEnd("time1")
</script>
